<template>
    <div>
        <el-form :inline="true" size="small" :model="formInline">
            <el-form-item label="作业名称">
                <el-input v-model="formInline.user" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="作业类型">
                <el-select v-model="formInline.region" placeholder="请选择" clearable>
                    <el-option label="未完成" value="0" />
                    <el-option label="已完成" value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="提交时间">
                <el-date-picker v-model="formInline.date" type="date" placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table ref="singleTableRef" tooltip-effect="dark" :data="tableData" highlight-current-row border stripe
            align="center" size="small" style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column property="name" label="作业名称" align="center" width="120" />
            <el-table-column property="phone" label="发布时间" width="100" align="center" />
            <el-table-column property="phone2" label="作业类型" align="center" />
            <el-table-column property="email" label="课程名称" align="center" width="100">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ row.email }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column property="identity" label="提交时间" align="center" width="160">
            </el-table-column>
            <el-table-column property="identity" label="截止时间" align="center" width="160">
            </el-table-column>
            <el-table-column label="操作" align="center" width="400">

                <template #default="{ row }">
                    <el-button type="success">预览</el-button>
                    <el-button type="success">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <Pagination />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import Pagination from "@/components/base/MyPagination.vue";
// 分页用
const queryCount = ref(1);
const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

const tableData = ref([
    {
        id: 1,
        name: '123',
        phone: '123',
        phone2: '123',
        email: '123',
        villager: '123',
        identity: '123',
        percentage: 80
    }
])


</script>

<style lang="scss" scoped></style>